<template>
  <span
    style="
      display: block;
      font-size: 16px;
      text-align: center;
      padding: 10px;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 10px;
    "
    >可见已选中用户清单</span
  >
  <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
  <Table
    v-model:pageSize="pageSize"
    v-model:currentPage="currentPage"
    :columns="allSchemas.tableColumns"
    :data="dataList"
    row-key="uuid"
    :loading="loading"
    :pagination="{
      total: total,
      pageSize: pageSize
    }"
    @selection-change="checkAll"
    @register="tableRegister"
  />
</template>
<script setup lang="tsx">
import { PropType, ref, unref } from 'vue'
import { Search } from '@/components/Search'
import { useTable } from '@/hooks/web/useTable'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { Table } from '@/components/Table'
import SetSecurCheckApi from '@/api/securcheck/SetSecurCheck'
import { useSecurCheckStore } from '@/store/modules/securcheck'
import { ElMessage } from 'element-plus'
import { UserCrudSchemas, UniteCrudSchemas } from './index'
const crudSchemas = ref<CrudSchema[] | undefined>()
const SecurCheckStore = useSecurCheckStore()
const SelectedTitle = ref('')
if (SecurCheckStore.groupUserCom == 0) {
  crudSchemas.value = UserCrudSchemas
  SelectedTitle.value = '可见已选中用户清单'
} else {
  crudSchemas.value = UniteCrudSchemas
  SelectedTitle.value = '可见已选中单位清单'
}
const { allSchemas } = useCrudSchemas(crudSchemas.value)

const props = defineProps({
  taskId: {
    type: Number as PropType<number>,
    default: () => null
  },
  getListChild: {
    type: Function
  }
})
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const i = await SetSecurCheckApi.GetGroupSelectList({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      taskId: props.taskId,
      groupUserCom: SecurCheckStore.groupUserCom
    })
    return {
      list: i.rows,
      total: i.total
    }
  },
  fetchDelApi: async () => {
    return true
  }
})

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods
const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}
const selectArr = ref<any>([]) // 右边列表
function checkAll(val) {
  SecurCheckStore.nowSelectRightData = val
}
function handleConcatArr(selectArr, nowSelectRightData) {
  let arr = []
  arr = arr.concat(selectArr, nowSelectRightData)
  return arr
}
function handleRemoveTabList(isNeedArr, originalArr) {
  if (isNeedArr.length && originalArr.length) {
    for (let i = 0; i < isNeedArr.length; i++) {
      for (let k = 0; k < originalArr.length; k++) {
        if (isNeedArr[i]['uuid'] === originalArr[k]['uuid']) {
          originalArr.splice(k, 1)
        }
      }
    }
  }
}
// 取消
async function handleRemoveSelect() {
  selectArr.value = handleConcatArr(selectArr.value, SecurCheckStore.nowSelectRightData)
  const res = SecurCheckStore.nowSelectRightData.map((item) => {
    return item.uuid
  })
  const i = await SetSecurCheckApi.PutMoveTask({ taskId: props.taskId, type: 1, uuid: res })
  if (i && props.getListChild) {
    ElMessage.success('移出选中成功')
    props.getListChild()
  }
  handleRemoveTabList(SecurCheckStore.nowSelectRightData, dataList.value)
  SecurCheckStore.nowSelectRightData = []
}

defineExpose({
  handleRemoveSelect,
  getList
})
</script>
<style scoped></style>
